<template>
	<view>
		<view class="mapWrap">
			<view class="mapItem"
				:style="{'background':item.bgCol}"
				v-for="(item,index) in stepList"
				:key="index"
				@tap="goSourceDet(item.name)"
			>
				<image class="stepImg" mode="widthFix" :src="item.url"></image>
				<view class="stepName">{{item.name}}</view>
			</view>
		</view>
		<template v-if="loadFlag">
			<view class="loadingView flexAll">
				<loading :cirSize="30"></loading>
				<view class="loadTxt">加载中...</view>
			</view>
		</template>
		<template v-else>
			<view class="currTask"><view class="lineView"></view><view>任务{{mapData.task}}:{{mapData.loreTaskName}}</view></view>
			<view class="mapCon">
				<view class="currLore"><text class="loreTxt">当前知识点:</text>{{mapData.loreName}}</view>
				<view class="golden">
					<text class="goldenNum">{{mapData.coin}}</text>
					<!-- <text class="goldenNum"><countTo :startVal='startVal' :endVal='endVal' :duration='3000'></countTo></text> -->
					<image class="goldenImg" mode="widthFix" src="../../../static/images/zhuxue/golden.png"></image>
				</view>
				<!-- {{mapData.stepCount}}级 -->
				<view class="syLine" @tap="viewTraceBackLine">溯源路线图<text class="totalLore">共{{mapData.loreCount}}个知识点</text><text class="viewLore">查看溯源</text></view>
				<button class="comBtn" :disabled="isDisabledFlag" @tap="goStudy" v-if="overDateNum == 1">{{mapData.buttonValue}}</button>
				<button class="comBtn" disabled v-if="overDateNum == 0">{{errMsg}}</button>
				<image v-if="isFinish == 2" class="compImg" src="../../../static/images/zhuxue/compIcon.png"></image>
			</view>
		</template>
	</view>
</template>

<script>
	import { getStudyMapData,checkCurrentLore,getQueData } from '@/api/zhuxue'
	import zhuxueUtils from '@/common/zhuxueUtils.js'
	export default {
		data() {
			return {
				loadFlag:true,
				stepList:[ 
					{name:'视频讲解',bgCol:'#64ccf2',url:'/static/images/zhuxue/stepNum_1.png'},
					{name:'点拨指导',bgCol:'#fec812',url:'/static/images/zhuxue/stepNum_2.png'},
					{name:'知识清单',bgCol:'#c7da33',url:'/static/images/zhuxue/stepNum_3.png'},
					{name:'解题示范',bgCol:'#00c495',url:'/static/images/zhuxue/stepNum_4.png'}
				],
				loreId:0,
				studyLogId:0,
				mapData:[],
				pathType:'',//diagnosis
				isDisabledFlag:false,
				isFinish:-1,//2->本知识点完成 0->未做 1->继续答题
				currSubId:0,
				taskName:'',
				currentLoreId:0,
				overDateNum:-1,//0 已过期 1正常使用
				errMsg:''
			}
		},
		onLoad(options){
			this.loreId = options.loreId;
			this.studyLogId = options.studyLogId;
		},
		onShow(){
			this.loadStudyMapData();
		},
		onUnload(){
			uni.removeStorageSync('zxQueList');
			uni.removeStorageSync('studyQueList');
			uni.removeStorageSync('lorePath');
		},
		methods: {
			viewTraceBackLine(){
				uni.navigateTo({
					url:'/pages/subIndex/traceBack/traceBack?loreId=' + this.loreId + '&studyLogId=' + this.studyLogId + '&fromPage=mapPage'
				})
			},
			onNavigationBarButtonTap(){
				uni.navigateTo({
					url:'/pages/subIndex/studyMap/taskReward?studyLogId=' + this.studyLogId + '&loreName=' + this.mapData.loreName
				})
			},
			goStudy(){
				if(this.isFinish == 2){//该知识点完成
					var field = { account:uni.getStorageSync('token'),loreId:this.loreId,studyLogId:this.studyLogId };
					let contentStr = this.crypto.encrypt(JSON.stringify( field )); 
					checkCurrentLore({content:contentStr}).then(res=>{
						this.commonJump();
					}).catch(err=>{
						console.log(err)
					});
				}else{
					this.commonJump();
				}
			},
			commonJump(){
				var tmpRes = this.mapData;
				if(this.pathType == 'diagnosis'){//诊断
					uni.navigateTo({
						url:'/pages/subIndex/queList/queList?loreName=' + tmpRes.loreName + '&taskName=' + tmpRes.loreTaskName + '&currSubId=' + this.currSubId + '&studyLogId=' + this.studyLogId + '&loreId=' + this.loreId + '&nextLoreIdStr=' + tmpRes.nextLoreIdArray + '&currentLoreId=' + this.currentLoreId
					})
				}else{//五步学习
					uni.navigateTo({
						url:'/pages/subIndex/studyWelcome/studyWelcome?studyLogId=' + tmpRes.studyLogId + '&nextLoreIdArray=' + tmpRes.nextLoreIdArray + '&loreTaskName=' + tmpRes.loreTaskName + '&loreName=' + tmpRes.loreName + '&currSubId=' + this.currSubId + '&loreId=' + this.loreId
					})
				}
			},
			loadStudyMapData(){
				var field = { account:uni.getStorageSync('token'),studyLogId:this.studyLogId,loreId:this.loreId }
				let contentStr = this.crypto.encrypt(JSON.stringify( field ));
				this.loadFlag = true;
				getStudyMapData({content:contentStr}).then(res=>{
					var tmpRes = res.data.datas;
					this.mapData = tmpRes;
					this.pathType = tmpRes.pathType;
					this.isFinish = tmpRes.isFinish;
					this.studyLogId = tmpRes.studyLogId;
					setTimeout(()=>{
						uni.setNavigationBarTitle({
							title:this.mapData.loreName
						})
					},100);
					this.loadQueData();
				}).catch(err=>{console.log(err);this.loadFlag = false;});
			},
			loadQueData(){
				var field = { account:uni.getStorageSync('token'),studyLogId:this.studyLogId,loreId:this.loreId,loreType:this.mapData.loreType,nextLoreIdArray:this.mapData.nextLoreIdArray,loreTaskName:this.mapData.loreTaskName };
				let contentStr = this.crypto.encrypt(JSON.stringify( field )); 
				getQueData({content:contentStr}).then(res=>{
					console.log(res)
					this.loadFlag = false;
					let tmpRes = res.data.datas;
					uni.setStorageSync('lorePath',tmpRes.path);
					this.currSubId = tmpRes.subId;
					this.currentLoreId = tmpRes.currentLoreId;
					var lqList = tmpRes.lqList;
					var reg = new RegExp("Module/", "g");
					this.overDateNum = 1;
					for(let i in lqList){
						if(lqList[i].lqSub.indexOf('Module/') != -1){
							lqList[i].lqSub = lqList[i].lqSub.replace(reg, this.zhuXueServer + '/Module/');
						}
						//生成随机答案选项数组
						if(lqList[i].completeStatus == 1){//做过的题
							lqList[i].answerOptionArray = zhuxueUtils.assignToArray(lqList[i].answerA,lqList[i].answerB,lqList[i].answerC,lqList[i].answerD,lqList[i].answerE,lqList[i].answerF);
							lqList[i].currAns = lqList[i].myAnswer;
							// if(lqList[i].myAnswer == ){}
							if(lqList[i].lqType == '单选题' || lqList[i].lqType == '判断题'){
								lqList[i].myAnsSingleIndex = zhuxueUtils.transOptToNums(lqList[i].myAnswer)
							}else if(lqList[i].lqType == '多选题'){
								lqList[i].multiOptIndexArr = [];
								for(var j=0;j<lqList[i].answerOptionArray.length;j++){
									var tmpObj = {
										selFlag:false
									};
									lqList[i].multiOptIndexArr.push(tmpObj);
								}
								var myAnsArr = lqList[i].myAnswer.split(',');
								var myAnsIndexArr = [];
								for(var k=0;k<myAnsArr.length;k++){
									myAnsIndexArr.push(zhuxueUtils.transOptToNums(myAnsArr[k]));
								}
								for(var f=0;f<lqList[i].multiOptIndexArr.length;f++){
									for(var g=0;g<myAnsIndexArr.length;g++){
										if(f == myAnsIndexArr[g]){
											lqList[i].multiOptIndexArr[f].selFlag = true;
										}
									}
								}
							}
						}else{
							lqList[i].answerOptionArray = zhuxueUtils.radomAnswerArray( zhuxueUtils.assignToArray(lqList[i].answerA,lqList[i].answerB,lqList[i].answerC,lqList[i].answerD,lqList[i].answerE,lqList[i].answerF) );
							lqList[i].optIndex = -1;//单选题 判断题 下标
							lqList[i].currAns = '';
							lqList[i].result = -1;//0->错 1对 每道题提交后记录当前回答是否正确
							if(lqList[i].lqType == '单选题' ||　lqList[i].lqType == '判断题'){
								lqList[i].myAnsSingleIndex = -1;
							}else if(lqList[i].lqType == '多选题'){
								lqList[i].multiOptIndexArr = [];
								for(var j=0;j<lqList[i].answerOptionArray.length;j++){
									var tmpObj = {
										selFlag:false
									};
									lqList[i].multiOptIndexArr.push(tmpObj)
								}
							}else if(lqList[i].lqType == '填空选择题'){
								lqList[i].tkOptIndexArr = [];
								for(var j=0;j<lqList[i].answerNum;j++){
									var tmpObj = {
										tkIndex:-1,
										value:''
									};
									lqList[i].tkOptIndexArr.push(tmpObj);
								}
							}
						}
					}
					uni.setStorageSync('zxQueList',lqList);
				}).catch(err=>{
					//console.log(err)
					this.overDateNum = 0;
					this.loadFlag = false;
					if(err.data.code == 20017){
						this.errMsg = '会员已过期,请续费';
					}else{
						this.errMsg = err.data.message;
					}
				});
			},
			//听 说 读 写 det
			goSourceDet(loreTypeName){
				uni.navigateTo({
					url:'/pages/subIndex/studyMap/mapDet?loreId=' + this.loreId + '&loreTypeName=' + loreTypeName
				})
			}
		}
	}
</script>
<style lang="scss">
	page{
		background: $pss-bg-primary;
	}
</style>
<style lang="scss" scoped>
	.loadingView{
		height: 600rpx;
		flex-direction: column;
		color: $pss-text-color8;
		@include respTo(phone){
			font-size: $font-size28;
		}
		@include respTo(pad){
			font-size: $padSize18;
		}
		.loadTxt{
			margin-top: 5rpx;
		}
	}
	.mapCon{
		background: #fff;
		position: relative;
		@include respTo(phone){
			padding: 30rpx;
		}
		@include respTo(pad){
			padding: 20rpx;
		}
		.compImg{
			@include respTo(phone){
				width: 200rpx;
				height: 200rpx;
			}
			@include respTo(pad){
				width: 180rpx;
				height: 180rpx;
				
			}
			position: absolute;
			right: 30rpx;
			top: -100rpx;
		}
		.comBtn{
			margin-top: 50rpx !important;
			background: #64ccf2;
			border-radius: 50rpx;
			@include respTo(pad){
				margin-top: 20rpx !important;
				height: 70rpx;
				line-height: 70rpx;
				font-size: $padSize20;
			}
		}
		.syLine{
			color: $pss-text-color8;
			@include respTo(phone){
				height: 80rpx;
				line-height: 80rpx;
				margin-top: 30rpx;
				font-size: $font-size28;
			}
			@include respTo(pad){
				height: 60rpx;
				line-height: 60rpx;
				margin-top: 20rpx;
				font-size: $padSize16;
			}
			.totalLore,
			.viewLore{
				color: #64ccf2;
				font-weight: bold;
			}
			.totalLore{
				margin: 0 15rpx;
			}
		}
		.golden{
			display: flex;
			justify-content: center;
			margin-top: 30rpx;
			position: relative;
			min-height: 280rpx;
			.goldenNum{
				font-size: 180rpx;
				color:#64ccf2;
				position: relative;
				z-index: 2;
				margin-right: 100rpx;
				font-weight: bold;
			}
			.goldenImg{
				width: 260rpx;
				position: absolute;
				z-index: 1;
				left: 50%;
				top: 20rpx;
				margin-left: -60rpx;
				opacity: .6;
			}
		}
		.currLore{
			color: $pss-text-color3;
			font-weight: bold;
			@include respTo(phone){
				font-size: $font-size28;
			}
			@include respTo(pad){
				font-size: $padSize18;
			}
			.loreTxt{
				color: $pss-text-colora;
				margin-right: 10rpx;
				font-weight: normal;
			}
		}
	}
	.currTask{
		background: #fff;
		color: $pss-text-color3;
		font-weight: bold;
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		@include respTo(phone){
			height: 80rpx;
			line-height: 80rpx;
			font-size: $font-size30;
			padding: 0 30rpx;
		}
		@include respTo(pad){
			height: 60rpx;
			line-height: 60rpx;
			font-size: $padSize20;
			padding: 0 20rpx;
		}
		.lineView{
			@include respTo(phone){
				width: 10rpx;
				height: 32rpx;
			}
			@include respTo(pad){
				width: 5rpx;
				height: 20rpx;
			}
			background: #64ccf2;
			border-radius: 20rpx;
			margin-right: 10rpx;
		}
	}
	.mapWrap{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		@include respTo(phone){
			padding:30rpx 30rpx 0;
		}
		@include respTo(pad){
			padding:20rpx 20rpx 0;
		}
		.mapItem{
			width: 48%;
			border-radius: 15rpx;
			position: relative;
			@include respTo(phone){
				height: 180rpx;
				margin-bottom: 30rpx;
			}
			@include respTo(pad){
				height: 160rpx;
				margin-bottom: 20rpx;
			}
			.stepName{
				color: #fff;
				position: absolute;
				right: 30rpx;
				bottom: 20rpx;
				@include respTo(phone){
					font-size: $font-size32;
				}
				@include respTo(pad){
					font-size: $padSize24;
				}
			}
			.stepImg{
				@include respTo(phone){
					width: 180rpx;
				}
				@include respTo(pad){
					width: 150rpx;
				}
				position: absolute;
				left: 30rpx;
				top: 0;
			}
		}
	}
</style>
